<style>
.my-dropdown3 {
  height: 200px;
  overflow: auto;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  background-color: #fff;
}
.list-item1:hover {
  background-color: #f5f7fa;
}
</style>
<template>
  <div class="demo-app">
    <!-- <el-dialog
      :append-to-body="true"
      :title="record.date+'月度总结'"
      :visible.sync="dialogmonth"
      width="70%"
    >
      <editor :disabled="pageAction=='view'" v-model="record.memo" :min-height="500" />
      <span :hidden="pageAction=='view'" slot="footer" class="dialog-footer">
        <el-button @click="dialogmonth = false">取消</el-button>
        <el-button type="primary" @click="submitMonth">保存</el-button>
      </span>
    </el-dialog>-->
    <el-container>
      <el-container>
        <el-header>
          <el-row>
            温馨提示:
            <br />1.成本进度：指该工作事项下安排计划的员工所填的日报财务工时之和/该事项的预期工作量(系统自动计算)。
            <br />2.当月只能填写上月的工作进度,作为上一个月的总的工作进度总结。
          </el-row>
        </el-header>
        <el-main>
          <vxe-toolbar ref="xToolbar1" custom>
            <template #buttons>
              <vxe-button type="text" icon="fa fa-calendar-o">项目编号:{{project.projectCode}}</vxe-button>
              <vxe-button
                type="text"
                status="primary"
                icon="fa fa-grav"
              >项目名称:{{project.projectName}}</vxe-button>
              <vxe-button
                type="text"
                status="success"
                icon=" fa fa-address-card"
              >项目经理:{{project.projectManager}}</vxe-button>
              <vxe-button type="text" status="info" icon="fa fa-filter">总成本进度:{{allSum}}</vxe-button>
              <vxe-button type="text" status="info" icon="fa fa-table" @click="monthClick2">重要事项记录</vxe-button>
              <vxe-button type="text" status="warning" icon="fa fa-anchor" @click="mileClick">里程碑计划</vxe-button>
              <!-- <vxe-pulldown transfer ref="xDown3">
                <template #default>
                  <vxe-button icon="fa fa-table" @click="clickEvent3">月度总结列表</vxe-button>
                </template>
                <template #dropdown>
                  <div class="my-dropdown3">
                    <div class="list-item1" v-for="item in dates" :key="item">
                      <i class="el-icon-date">{{item}}</i>
                      <el-button @click="monthClick(item,'edit')" size="mini" round>填报</el-button>
                      <el-button @click="monthClick(item,'view')" size="mini" round>查看</el-button>
                    </div>
                  </div>
                </template>
              </vxe-pulldown>-->
            </template>
          </vxe-toolbar>
          <vxe-table
            border
            ref="xTable1"
            id="menuId"
            :data="tableData"
            :loading="loding"
            :custom-config="{storage: true}"
            max-height="600"
            empty-text="暂时还没有数据！请下月再来"
            :span-method="mergeRowMethod"
          >
            <vxe-column type="seq" width="60"></vxe-column>
            <vxe-column min-width="120" field="name" title="工作大纲"></vxe-column>
            <vxe-column min-width="200" field="plan" title="工作事项"></vxe-column>
            <vxe-column min-width="90" field="newest" title="最新进度"></vxe-column>
            <template v-for="key in dates">
              <vxe-colgroup :key="key" :field="key" :title="key">
                <vxe-column width="120" title="成本进度">
                  <template #default="{ row }">{{row[key].cost}}</template>
                </vxe-column>
                <vxe-column width="120" title="工作进度">
                  <template v-if="key==dates[dates.length-1]" #default="{ row }">
                    <vxe-input
                      v-model="row[key].work"
                      placeholder="请输入"
                      type="number"
                      min="0"
                      max="100"
                      clearable
                    >
                      <template #suffix>
                        <span>%</span>
                      </template>
                    </vxe-input>
                  </template>
                  <template v-else #default="{ row }">{{row[key].work==null?0:row[key].work}}%</template>
                </vxe-column>
              </vxe-colgroup>
            </template>
          </vxe-table>
        </el-main>
        <el-footer v-if="status!='close'">
          <el-row style="padding-top: 20px;">
            <el-col :offset="11" :span="2">
              <el-button
                :loading="substr"
                icon="el-icon-top"
                @click="submit"
                type="primary"
                round
              >提交</el-button>
            </el-col>
          </el-row>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import _ from "lodash";
import request from "@/utils/request";
import Editor from "@/components/Editor";
export default {
  components: {
    Editor,
  },
  created() {
    this.$nextTick(() => {
      // 手动将表格和工具栏进行关联
      this.$refs.xTable1.connect(this.$refs.xToolbar1);
    });
    this.projectId = this.$attrs.projectId;
    this.status = this.$attrs.status;
    this.allSum = this.$attrs.extendedField2;
    this.getData(this.projectId);
  },
  data: function () {
    return {
      status: null,
      pageAction: null,
      record: {
        date: "",
        memo: "",
      },
      dialogmonth: false,
      allSum: "0",
      // tableData3: [],
      loding: false,
      project: {
        projectCode: "",
        projectName: "",
        projectManager: "",
      },
      substr: false,
      dates: [],
      tableData: [],
      projectId: null,
    };
  },
  methods: {
    mileClick() {
      this.$root.openModal(
        "/smartform/hub/ProjectMilestoneFrom?projectId=" + this.projectId,
        null,
        null,
        "80%",
        "80%"
      );
    },
    monthClick2() {
      this.$root.openModal("/smartform/hub/MonthProjectRecordList", null, {
        projectId: this.projectId,
        status: this.status,
      });
    },
    monthClick(item, action) {
      this.pageAction = action;
      request({
        url: "/eip/Outline/getRecord",
        method: "get",
        params: {
          projectId: this.projectId,
          date: item,
        },
      })
        .then((r) => {
          if (r && !r.initMessage) {
            this.record = r.parameters.record;
            this.record.memo = _.unescape(this.record.memo);
            this.dialogmonth = true;
          } else {
            this.$message.error(r.initMessage || "数据请求失败");
          }
        })
        .catch((e) => {
          reject(e);
        });
    },
    submitMonth() {
      var clone = _.clone(this.record);
      //转义
      clone.memo = _.escape(clone.memo);
      request({
        url: "/eip/Outline/saveRecord",
        method: "post",
        data: {
          record: JSON.stringify(clone),
        },
      })
        .then((r) => {
          if (r.success) {
            this.$message.success(r.message);
            // this.record = r.parameters.record;
          } else {
            this.$message.error(r.message);
          }
        })
        .catch((e) => {
          reject(e);
        });
    },
    clickEvent3() {
      this.$refs.xDown3.showPanel();
    },
    submit() {
      this.loding = true;
      this.substr = true;
      //先前只保存最后两月的数据
      // var dates = _.cloneDeep(this.dates);
      // var need = dates.splice(dates.length - 2, 2);
      // var data = _.cloneDeep(this.tableData);
      // _.forEach(data, function (value, key) {
      //   delete value._XID;
      //   _.forEach(dates, function (val, key) {
      //     delete value[val];
      //   });
      // });
      // var end = JSON.parse(
      //   JSON.stringify(data)
      //     .replace(new RegExp(need[0], "g"), "now")
      //     .replace(new RegExp(need[1], "g"), "after")
      // );
      //现只保存前一个月的工作进度
      var dates = _.cloneDeep(this.dates);
      var need = dates.splice(dates.length - 1, 1);
      var data = _.cloneDeep(this.tableData);
      _.forEach(data, function (value, key) {
        delete value._XID;
        _.forEach(dates, function (val, key) {
          delete value[val];
        });
      });
      var end = JSON.parse(
        JSON.stringify(data).replace(new RegExp(need[0], "g"), "last")
      );
      request({
        url: "/eip/Outline/saveMonth",
        method: "post",
        data: {
          data: JSON.stringify(end),
          projectId: this.projectId,
        },
      })
        .then((r) => {
          if (r && !r.initMessage) {
            if (r.success == true) {
              this.$message({
                message: "保存成功！",
                type: "success",
              });
              this.getData(this.projectId);
            } else {
              this.$message.error("数据请求失败");
            }
          } else {
            this.$message.error(r.initMessage || "数据请求失败");
          }
        })
        .catch((e) => {
          reject(e);
        });
    },
    mergeRowMethod({ row, _rowIndex, column, visibleData }) {
      const fields = ["name"];
      const cellValue = row[column.property];
      if (cellValue && fields.includes(column.property)) {
        const prevRow = visibleData[_rowIndex - 1];
        let nextRow = visibleData[_rowIndex + 1];
        if (prevRow && prevRow[column.property] === cellValue) {
          return { rowspan: 0, colspan: 0 };
        } else {
          let countRowspan = 1;
          while (nextRow && nextRow[column.property] === cellValue) {
            nextRow = visibleData[++countRowspan + _rowIndex];
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 };
          }
        }
      }
    },
    getData(projectId) {
      this.loding = true;
      this.substr = true;
      request({
        url: "/eip/Outline/getMonthSchedule",
        method: "get",
        params: { projectId: projectId },
      })
        .then((r) => {
          if (r && !r.initMessage) {
            if (r.success == true) {
              this.tableData = r.parameters.data;
              this.dates = r.parameters.dates;
              this.project = r.parameters.project;
              this.loding = false;
              this.substr = false;
            } else {
              this.$message.error(r.message);
            }
          } else {
            this.$message.error(r.initMessage || "数据请求失败");
          }
        })
        .catch((e) => {
          reject(e);
        });
    },
  },
};
</script>
